<template>
  <div class="app-container">
    <!-- 专项练习 -->
    <div class="backgroundClass">
      <div class="titleBox">
        <span class="title_fontSize">专项练习</span>
      </div>
      <div
        class="content-box"
        v-loading="loading"
        element-loading-text="急速加载中..."
      >
        <el-radio-group v-model="tiku">
          <el-radio-button style="margin-bottom: 12px" label="练习题库"
            >全部题库</el-radio-button
          >
          <el-radio-button
            v-if="isShowJX"
            style="margin-bottom: 12px"
            label="精选题库"
            >精选题库</el-radio-button
          >
        </el-radio-group>
        <div class="content-box-title">
          <span>
            专项练习可以多次循环答题，您可以有针对性的练习各类题型。
          </span>
        </div>
        <el-form label-position="left" label-width="86px">
          <el-form-item label="用户姓名:" class="noneMargin">
            <span>{{ nickname }}</span>
          </el-form-item>
          <el-form-item label="身份证号:" class="noneMargin">
            <span>{{ adminUserId }}</span>
          </el-form-item>
          <el-form-item label="练习科目:">
            <el-select
              v-model="subjectid"
              placeholder="请选择"
              disabled
              style="width: 100% !important"
            >
              <el-option
                v-for="item in userinfor"
                :key="item.id"
                :label="item.subjectTitle"
                :value="item.subject_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出题模式:">
            <el-select
              v-model="value2"
              placeholder="请选择"
              style="width: 100% !important"
            >
              <el-option label="分页循环模式" value="2"> </el-option>
              <el-option label="普通模式" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="练习类别:" v-if="isYes">
            <el-select
              v-model="value"
              placeholder="请选择"
              style="width: 100% !important"
            >
              <el-option label="只做新题" value="新题"> </el-option>
              <el-option label="只做错题" value="错题"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="练习题型:">
            <el-radio-group v-model="radio" size="small">
              <el-radio label="" border>全部</el-radio>
              <el-radio label="单选" border>单选题</el-radio>
              <el-radio label="判断" border>判断题</el-radio>
              <el-radio
                label="多选"
                border
                v-if="
                  gz == '特种设备' ||
                  gz == '燃气从业人员培训' ||
                  gz == '现场监护人培训'
                "
                >多选题</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="判断题型:" v-if="radio == '判断'">
            <el-select
              v-model="dxtx"
              placeholder="请选择"
              style="width: 100% !important"
              :multiple="true"
            >
              <!-- <el-option
                    label="全部题型"
                    value='全部'
                    >
                  </el-option> -->
              <el-option label="正确题型" value="正确"> </el-option>
              <el-option label="错误题型" value="错误"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单选题型:" v-if="radio == '单选'">
            <el-select
              v-model="dxtx"
              placeholder="请选择"
              :multiple="true"
              style="width: 100% !important"
            >
              <el-option label="选项A" value="A"> </el-option>
              <el-option label="选项B" value="B"> </el-option>
              <el-option label="选项C" value="C"> </el-option>
              <el-option label="选项D" value="D"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="答案提示:">
            <el-select
              v-model="daan"
              placeholder="请选择"
              style="width: 100% !important"
            >
              <el-option label="不显示答案" value="不显示"> </el-option>
              <el-option label="显示答案" value="显示"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="知识点题库:" v-if="chapterList.length != 0">
            <el-select
              v-model="chapter_id"
              placeholder="请选择"
              style="width: 100% !important"
              clearable
            >
              <el-option
                :label="item.chapter_title"
                :value="item.id"
                v-for="item in chapterList"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <div class="content-box-footer">
            <span>
              练习提示：{{subject}}，共{{total}}道，您已答{{answered}}道。
            </span>
          </div> -->
        <div class="content-button">
          <!-- <el-button type="danger" style="margin-right:32px;">清除记录</el-button> -->
          <el-button type="primary" @click="startPractice">开始练习</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exerList, getAnswered, getQcount, chapter } from "@/api/admin.js";
import {
  getsubject_id,
  getsubjectTitle,
  getapplyid,
  getisfacetime,
  getisfacetimezxface,
} from "@/utils/auth";
import { log2 } from "pdfjs-dist/build/pdf.worker";
export default {
  computed: {
    ...mapGetters(["userinfor", "adminUserId", "nickname"]),
  },
  data() {
    return {
      count_list: [],
      value: "分页循环模式", //练习类别
      radio: "", //练习题型
      pdtx: [], //判断题型
      dxtx: [], //判断题型
      subject: "", //练习科目
      subjectid: "", //练习类别  传入后台数据
      daan: "不显示",
      gz: "", //工种
      restart: 0, //是否重新做题  0否 1是
      isYes: false,
      value2: "2", //默认循环出题
      loading: false, //等待
      applyid: getapplyid(),

      total: 0, //总题数
      answered: 0, //做过的题数
      tiku: "练习题库",
      isShowJX: false, //是否显示精选题库按钮

      chapterList: [],
      chapter_id: "",
      hasNow: false,
    };
  },
  watch: {
    value2(value) {
      if (value == "1") {
        this.isYes = true;
        this.value = "新题";
      } else {
        this.isYes = false;
        this.value = "分页循环模式";
      }
    },
    radio(val) {
      this.pdtx = [];
      this.dxtx = [];
    },
  },
  methods: {
    // 更变出题规则之前 2023.6.14
    // startPractice() {
    //   if (!this.subjectid) {
    //     return this.$message.warning("请选择培训科目");
    //   }
    //   if (!this.value) {
    //     return this.$message.warning("请选择练习类别");
    //   }
    //   // if(!this.radio){
    //   //   return this.$message.warning('请选择练习题型');
    //   // }
    //   let face = "";
    //   if (getisfacetime()) {
    //     face = JSON.parse(getisfacetime()).face;
    //   } else if (getisfacetimezxface()) {
    //     face = JSON.parse(getisfacetimezxface()).face;
    //   }
    //   let form = {
    //     subjectid: this.subjectid,
    //     gz: this.gz,
    //     qtype: this.radio,
    //     // pdtx:JSON.parse(JSON.stringify(this.pdtx)).join(),
    //     answer: JSON.parse(JSON.stringify(this.dxtx)).join(),
    //     form: JSON.parse(JSON.stringify(this.value)),
    //     restart: this.restart,
    //     applyid: this.applyid,
    //     pool: this.tiku,
    //     face,
    //   };
    //   this.loading = true;
    //   // delTi()
    //   if (this.chapter_id) {
    //     form.chapter_id = this.chapter_id;
    //     form.form = "知识点模式";
    //   } else {
    //     delete form.chapter_id;
    //     form.form = JSON.parse(JSON.stringify(this.value));
    //   }
    //   exerList(form).then((res) => {
    //     if (res.code == 200) {
    //       if (
    //         res.data.status.indexOf("没有试题") != -1 ||
    //         res.data.status.indexOf("没有错题") != -1
    //       ) {
    //         this.loading = false;
    //         this.$message.error(res.data.status);
    //       }
    //       if (res.data.status == "已做完") {
    //         this.loading = false;
    //         this.$confirm("题库试题已做完，是否重新开始做题", "提示", {
    //           confirmButtonText: "确定",
    //           cancelButtonText: "取消",
    //           type: "warning",
    //           showClose: false,
    //         })
    //           .then(() => {
    //             form.restart = 1;
    //             this.loading = true;
    //             exerList(form).then((resA) => {
    //               this.loading = false;
    //               if (resA.code == 200) {
    //                 // this.$store.dispatch('questions/commitTi',res.data.list)
    //                 this.$store.commit("SET_TI", resA.data.list);
    //                 this.$router.push(
    //                   "/exam?exerid=" +
    //                     resA.data.exerid +
    //                     "&subjectid=" +
    //                     this.subjectid +
    //                     "&daan=" +
    //                     this.daan +
    //                     "&progress=" +
    //                     resA.data.progress
    //                 );
    //               }
    //             });
    //           })
    //           .catch(() => {});
    //       }
    //       if (res.data.status == "正常") {
    //         this.loading = false;
    //         // this.$store.dispatch('questions/commitTi',res.data.list)
    //         this.$store.commit("SET_TI", res.data.list);
    //         this.$router.push(
    //           "/exam?exerid=" +
    //             res.data.exerid +
    //             "&subjectid=" +
    //             this.subjectid +
    //             "&daan=" +
    //             this.daan +
    //             "&progress=" +
    //             res.data.progress
    //         );
    //       }
    //     } else {
    //       this.loading = false;
    //       this.$message.error(res.msg);
    //     }
    //   });
    // },
    startPractice() {
      if (!this.subjectid) {
        return this.$message.warning("请选择培训科目");
      }
      if (!this.value) {
        return this.$message.warning("请选择练习类别");
      }
      // if(!this.radio){
      //   return this.$message.warning('请选择练习题型');
      // }
      let face = "";
      if (getisfacetime()) {
        face = JSON.parse(getisfacetime()).face;
      } else if (getisfacetimezxface()) {
        face = JSON.parse(getisfacetimezxface()).face;
      }
      let form = {
        subjectid: this.subjectid,
        gz: this.gz,
        qtype: this.radio,

        // pdtx:JSON.parse(JSON.stringify(this.pdtx)).join(),
        answer: JSON.parse(JSON.stringify(this.dxtx)).join(),
        form: JSON.parse(JSON.stringify(this.value)),
        restart: this.restart,
        applyid: this.applyid,
        pool: this.tiku,
        face,
      };
      this.loading = true;
      // delTi()
      if (this.chapter_id) {
        form.chapter_id = this.chapter_id;
        form.form = "知识点模式";
      } else {
        delete form.chapter_id;
        form.form = JSON.parse(JSON.stringify(this.value));
      }
      form.limit = 1;
      getQcount({
        subjectid: this.subjectid,
        pool: "练习题库",
        applyid: getapplyid(),
      }).then((res) => {
        if (res.code == 200) {
          this.count_list = res.data.count_list;
        }
      });

      exerList(form).then((res) => {
        if (res.code == 200) {
          if (
            res.data.status.indexOf("没有试题") != -1 ||
            res.data.status.indexOf("没有错题") != -1
          ) {
            this.$message.error(res.data.status);
          }
          if (res.data.status == "已做完") {
            this.loading = false;
            this.$confirm("题库试题已做完，是否重新开始做题", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              showClose: false,
            })
              .then(() => {
                form.restart = 1;

                this.loading = true;
                if (res.data.progress_order + 500 < 1000) {
                  form.limit = 1000;
                } else {
                  form.limit = res.data.progress_order + 500;
                }
                form.page = 1;
                var form2;
                if (res.data.count > form.limit) {
                  form2 = JSON.parse(JSON.stringify(form));
                } else {
                  form2 = null;
                }
                exerList(form).then((resA) => {
                  this.loading = false;
                  if (resA.code == 200) {
                    // this.$store.dispatch('questions/commitTi',res.data.list)
                    this.$store.commit("SET_TI", resA.data.list);

                    this.$router.push(
                      "/exam?exerid=" +
                        resA.data.exerid +
                        "&subjectid=" +
                        this.subjectid +
                        "&daan=" +
                        this.daan +
                        "&progress=" +
                        resA.data.progress +
                        "&form=" +
                        JSON.stringify(form2)
                    );
                  }
                });
              })
              .catch(() => {});
          }
          if (res.data.status == "正常") {
            // ============start=============================

            let x, y, z; //x为距离预算的差(当前题号 上300 下500)
            //y为上次做题以1000分页的所在页
            //z为每页的数量
            //注: 当前坐在位置1000取余后如果在300 - 500之间，那就可以直接以1000分页，当小于300时 y在传给page前要 + 1
            let residual = res.data.progress_order % 1000;

            if (residual > 500) {
              x = 500 - (1000 - residual);
              y = Math.ceil(res.data.progress_order / 1000);

              if (x % y != 0) {
                x = x + (y - (x % y));
              }
              z = 1000 + x / y;
            } else if (residual < 300 && res.data.progress_order > 1000) {
              x = 300 - residual;

              y = Math.floor(res.data.progress_order / 1000) + 1;
              if (x % y != 0) {
                x = x + (y - (x % y));
              }
              z = 1000 - x / y;
            } else if (residual >= 300 && residual <= 500) {
              y = Math.ceil(res.data.progress_order / 1000);

              z = 1000;
            } else {
              y = 1;
              z = 1000;
            }

            form.limit = z;

            // =============end====================================
            // if (res.data.progress_order + 500 < 1000) {
            //   form.limit = 1000;
            // } else {
            //   form.limit = res.data.progress_order + 500;
            // }
            form.page = y;
            var form2;
            if (res.data.count > form.limit) {
              form2 = JSON.parse(JSON.stringify(form));
            } else {
              form2 = null;
            }

            exerList(form).then((resB) => {
              this.loading = false;
              if (resB.code == 200) {
                // this.$store.dispatch('questions/commitTi',res.data.list)
                this.$store.commit("SET_TI", resB.data.list);

                this.$router.push(
                  "/exam?exerid=" +
                    resB.data.exerid +
                    "&subjectid=" +
                    this.subjectid +
                    "&daan=" +
                    this.daan +
                    "&progress=" +
                    resB.data.progress +
                    "&form=" +
                    JSON.stringify(form2) +
                    "&count_list=" +
                    JSON.stringify(this.count_list)
                );
              }
            });
            // return;

            // this.$store.commit("SET_TI", res.data.list);
            // this.$router.push(
            //   "/exam?exerid=" +
            //     res.data.exerid +
            //     "&subjectid=" +
            //     this.subjectid +
            //     "&daan=" +
            //     this.daan +
            //     "&progress=" +
            //     res.data.progress
            // );

            // this.$store.dispatch('questions/commitTi',res.data.list)
          }
        } else {
          this.loading = false;
          this.$message.error(res.msg);
        }
      });
    },

    getExamList() {},
    //切换科目时
    changeSelect(value) {
      this.subjectid = value.split("-")[0];
      this.gz = value.split("-")[1];
    },
    //知识点
    knowList() {
      this.chapterList = [];
      // this.chapterList.titles=[]
      chapter({
        subject_id: this.subjectid,
        limit: 30,
      }).then((res) => {
        if (res.code == 200) {
          this.chapterList = res.data.list;
        }
      });
    },
  },
  created() {
    this.$store.commit("DEL_TI");
    this.subject = getsubjectTitle();
    this.subjectid = Number(getsubject_id());
    this.gz = this.userinfor.filter(
      (item) => item.subject_id == getsubject_id()
    )[0].gz;
    getAnswered({ subjectid: this.subjectid, applyid: getapplyid() }).then(
      (res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.answered = res.data.answered;
        }
      }
    );
    getQcount({
      subjectid: this.subjectid,
      pool: "精选题库",
      applyid: getapplyid(),
    }).then((res) => {
      if (res.code == 200) {
        if (res.data.count > 0) {
          this.isShowJX = true;
        } else {
          this.isShowJX = false;
        }
        if (
          this.$route.query.titleName &&
          this.$route.query.titleName != "undefined"
        ) {
          this.tiku = "精选题库";
        }
      }
    });
    this.knowList();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/utis.scss";
.app-container {
  height: calc(100vh - 50px) !important;
}
.backgroundClass {
  height: 100%;
}
.titleBox {
  display: flex;
  min-width: 500px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 24px;
  .title_fontSize {
    // line-height: 32px;
    font-size: 18px;
  }
}
.content-box {
  margin: 0 auto;
  margin-top: 24px;
  width: 678px;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 32px 71px;
  .content-box-title {
    padding: 16px 18px;
    background: #eaf9ff;
    span {
      color: #24aaf0;
      font-size: 16px;
    }
  }
  .content-box-footer {
    padding: 16px 18px;
    background: #fef3f1;
    span {
      color: #f33e34;
      font-size: 16px;
    }
  }
  .content-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
.el-form-item {
  margin-bottom: 24px;
}
.noneMargin {
  margin-bottom: 20px;
}
::v-deep {
  .is-disabled {
    .el-input__inner {
      color: #333;
    }
  }
  .el-radio-button {
    margin-bottom: 20px !important;
    margin-right: 30px !important;
    .el-radio-button__inner {
      border: 1px solid #ccc !important;
      border-radius: 4px;
    }
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border-radius: 4px;
    border-color: #1890ff !important;
  }
}
</style>